<template>
  <el-table
      :data="tableData"
      ref="multipleTable"
      style="width: 100%"
  >
    <el-table-column property="nickName" label="昵称" width="120"/>
    <el-table-column property="avatarUrl" label="头像" width="120">
      <template #default="scope">
        <img :src="scope.row.avatarUrl" style="width: 90px; height: auto;" />
      </template>
    </el-table-column>
    <el-table-column
        label="性别"
        width="90"
        :formatter="genderFormatter"
    />
    <el-table-column property="age" label="年龄" width="90"/>
    <el-table-column property="phoneNumber" label="手机号" width="140"/>
    <el-table-column property="email" label="邮箱" width="140"/>
    <el-table-column property="updatedAt" label="最后操作时间" width="200"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts" setup>
import {ref, onMounted} from 'vue';
import axios from 'axios';
import {ElMessage} from "element-plus";
const tableData = ref([]);
// 性别格式化函数
const genderFormatter = (row: { gender: number }) => {
  return row.gender === 0 ? '男' : '女';
};
const fetchUserList = async () => {
  try {
    const res = await axios.get('/wx/userlist');
    tableData.value = res.data.data;
  } catch (e) {
    console.error('Failed to fetch employee list:', e);
  }
};
const handleDelete = async (index,row) => {
  try {
    const res = await axios.delete(`/wx/delete/${row.userId}`)
    console.log(res.data)
    ElMessage({message: '删除成功！', type: 'success',})
    fetchUserList();
  }catch (e){
    ElMessage({message: '删除失败！', type: 'warning',})
    console.error(e);
  }
};

onMounted(() => {
  fetchUserList();
});
</script>
<style>

</style>